<template>
  <xdh-layout fixed>
    <xdh-header title="境外关注人员" layout="logo, title, nav" slot="north" :nav="nav" :nav-default-active="activeItem" :nav-router="true">
    </xdh-header>
    <div class="focus-container">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" class="focus-page"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive" class="focus-page"></router-view>
    </div>
  </xdh-layout>
</template>
<script>
  import XdhLayout from '@/widgets/xdh-layout';
  import XdhHeader from '@/widgets/xdh-header';
  export default {
    components: {
      XdhLayout,
      XdhHeader
    },
    data() {
      return {
        nav: [
          {
            id: '/focus-manage/home',
            text: '首页'
          },
          {
            id: '/focus-manage/person-filter',
            text: '境外人员关注'
          },
          {
            id: '/focus-manage/person-manage',
            text: '境外人员配置'
          },
          {
            id: '/focus-manage/person-history',
            text: '历史关注人员'
          }
        ]
      };
    },
    computed: {
      activeItem() {
        let path = this.$route.path;
        if (path.includes('filter-group')) {
          path = '/focus-manage/person-filter';
        }
        return path;
      }
    }
  };
</script>
<style  type="text/scss" lang="scss">
  .focus-container {
    padding: 10px 15px;
    box-sizing: border-box;
    height: 100%;
    .focus-page {
      height: 100%;
      .el-tabs__content {
        height: calc(100% - 80px);
        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
</style>